---
title: Sr Only
description: The SrOnly component can be used to render accessible labels that are only visible to screen readers by default.
docType: Demo
docGroup: Components
group: Utils
alias: [Screenreader Only]
components: [SrOnly]
---

# Sr Only

The `SrOnly` component can be used to render accessible labels that are only
visible to screen readers by default.

## Simple Example

The most common usage for the `SrOnly` component is to add text to an icon
button when a label cannot be provided by the `aria-label`.

> !Info! Check out the [Responsive Button](/components/button#responsive-button)
> demo to see how to switch from an icon button to a text button based on media
> queries.

```demo source="./SimpleExample.tsx"

```

### Visible while Focused

The text can also become visible while focused if needed by enabling the
`focusable` prop. Tab into the next demo to see the text.

```demo source="./VisibleWhileFocusedExample.tsx"

```
